<template>
  <div class='section_jzly'>
    <!-- 标题 -->
    <div class="section_jzly_title">
      <div>
        <span :class="jzly ? 'section_jzly_title_point_blue': 'section_jzly_title_point_gary'">&nbsp;</span>
        <span>就诊留言</span>
      </div>
      <div></div> <!-- 备用 -->
      <div>
        <span>
          <!-- <mt-switch v-model="jzly"></mt-switch> -->
        </span>
      </div>
    </div>


    <!-- 横线 -->
    <div class="section_jzly_line" v-show="false">
      <div>
        <span></span>
      </div>
    </div>


    <!-- 内容 -->
    <div class="section_jzly_content" v-show="jzly">
      <div class="section_content_jzly_content">
        <textarea row="2" cols="30" style="resize:none" placeholder="(最多输入60字)"
          maxlength="60" v-model="wonote"
        ></textarea>
      </div>
    </div>
  </div>

</template>

<script>
export default {
    props: { preinfostr: {
      type: Object,
    }},
  data() {
    return {
      ifShowMoreAddress:true,
      ifshowkd:false,
      jzly:true,
      wlxx:'',
      kdnm:'',
      kddh:'',
      wonote: '',
    };
  },
  created() {
    this.wonote = this.preinfostr.OI_WONOTE || '';
  },
  components: {
  },
  watch: {
    wonote(){
      this.setMedicly();
    }
  },
  methods: {
    setMedicly() {
      console.log('addr 发送给母组件前的留言信息 ==============' + this.wonote);
      // 返回给父组件是否配送，及配送信息
      this.$emit('setMedicly', `${this.wonote}`);
    },
  },
};
</script>

<style socped>

.section_jzly_title{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.section_jzly_title div{
  display: inline-flex;
  align-items: center;
}
.section_jzly_title div:first-child span:first-child{
  /* background: #26a2ff; */
  margin-right: .3rem;
  height: 50%;
}
.section_jzly_title_point_blue {
  background: #26a2ff;
}
.section_jzly_title_point_gary {
  background: #e0e0e0;
}


.section_jzly_line div:first-child span:first-child{
  display: block;
  border: 0.01rem solid #f1f1f1;
  margin: .5rem 0;
}


/* GLOBAL */
.section_jzly{
  border-radius: 10px;
  width: 95%;
  margin: auto;
/*   -webkit-box-shadow:0px 3px 3px #c8c8c8 ;
  -moz-box-shadow:0px 3px 3px #c8c8c8 ;
  box-shadow:0px 3px 3px #c8c8c8 ;
 */
}


/* CONTENT */
.section_jzly_content div:first-child{
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  /* align-items: center; */
  font-size: 0.8rem;
  /* border-bottom: .5px solid #eaeaea; */
  padding: 0;
  width: 100%;
}
.section_jzly_content div:first-child p{
  display: inline-block;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}
.section_jzly_content div:first-child p:nth-child(2) span{
  width: 5rem;
  line-height: 1.5rem;
  text-align: center;
}
.section_jzly_content div:first-child p:nth-child(3) {
  width: 100%;
}
.section_jzly_content div:first-child p:nth-child(3) span{
  width: 42%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: right;
}
.section_jzly_content div:first-child p:nth-child(3) span:first-child{
  /* padding-right: 1rem; */
}
.section_jzly_content div:first-child p:nth-child(3) span:last-child{
  text-align: left;
  color: #26a2ff;
}
.select {
  display: inline-block;
  text-align: center;
  margin: .5rem 0;
}
.select2 {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.8rem;
}
.select2 p{
/*   display: flex;
  flex-flow: row;
  justify-content: flex-start; */
  /* align-items: center; */
/*   font-size: 0.8rem;
  line-height: 1rem; */
  /* padding-top: 0.5rem; */
}
.select2 p:nth-child(1){
  margin-right: 1rem;
}
.select2 p:nth-child(2){
  display: inline-flex;
  flex-flow: column;
  justify-content: flex-start;
}
.select2 p:nth-child(2) span:nth-child(1) span:nth-child(1){
  margin-right: .5rem;
  font-size: 1rem;
}
.select2 p:nth-child(2) span{
  line-height: 1rem;
}
.select2 p:nth-child(2) span:nth-child(2) span:nth-child(1){
  display: block;
  width: 100%;
  white-space: nowrap!important;
  text-overflow: ellipsis!important;
  overflow: hidden!important;
  margin-top:.3rem;
  color: #666;
}
.select2 p:last-child{
  justify-self: flex-end;
}


.section_content_jzly_content {
  display: inline-flex;
  flex-direction: column;
}
</style>
